<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body style="background-color: #eeeeee">
<ul class="layui-nav" style="background-color: white">
    <li class="layui-nav-item" style="margin-left: 50%"><a href="">首页</a></li>
    <li class="layui-nav-item "><a href="">推荐文章</a></li>
    <li class="layui-nav-item "><a href="">工具下载</a></li>
    <li class="layui-nav-item"><a href="">留言小本</a></li>
    <li class="layui-nav-item"><a href="">求助专区</a></li>
    <li class="layui-nav-item"><a href="">关于作者</a></li>
    <li class="layui-nav-item">
        <a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img"></a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">退出</a></dd>
        </dl>
    </li>
</ul>
<div class="layui-row" style="background-color: #232e3c">
    <div class="layui-col-md3">
        <span style="padding-left: 50px;font-weight: 800;color: white;font-size: 200%">一语知温的博客</span>
    </div>
    <div class="layui-col-md9">
        <img th:src=" @{/img/head_img.png}" style="padding-left: 60%;">
    </div>
</div>
<div class="layui-row">
    <div class="layui-col-md7 layui-col-md-offset1" style="background-color: white">
        <div th:each="article:${articleList}">
            <div class="layui-row">
                <div class="layui-col-md10 layui-col-md-offset1"><a th:href="|/article/${article.id}"><h1
                        th:text="${article.headline}"
                        style="font-weight: 800"></h1></a></div>
                <div class="layui-col-md1"><h3 th:text="${article.articleClass}"></h3></div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md12">
                    <h2 th:text="${article.content}"></h2>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div class="layui-col-md3 layui-col-md-offset1">
                        <h3 th:text="${article.createDate}"></h3>
                    </div>
                    <div class="layui-col-md3 layui-col-md-offset1">
                        <h3 th:text="|阅读数:${article.readTime}"></h3>
                    </div>
                    <div class="layui-col-md3 layui-col-md-offset1">
                        <h3 th:text="|点赞数:${article.praiseNum}"></h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md2 layui-col-md-offset1"
         style="background-color: white">
        <h2>最热文章</h2>
        <div th:each="ha:${session.hottestArticle}"><h2 th:text="${ha.headline}"></h2>
            <h2 th:text="|点赞数:${ha.praiseNum}"></h2></div>
    </div>
    <div class="layui-col-md1">111</div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
        //…
    });
</script>
</body>
</html>